<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="flex flex_between">
                  <p class="flex flex_vcenter pdb20">
                    <i class="titleTag"></i>
                    <span class="fRedBig">主管医生意见表</span>
                  </p>
                    <div id="searchbyname">
                        <div class="form-group col-md-4" id="zhuguanyis">
                                <input type="hidden" class="form-control" placeholder="" v-model="param.doctorId">
                                <input type="text" class="form-control" v-model="param.doctorName"  placeholder="请输入主管医生姓名">
                                <div class="yishenglist">
                                    <p @click="mayclick()">清空并且退出</p>
                                    <p @click="mayclick(item,$event)" v-for="item in  mainDoctorlist | filterBy param.doctorName in 'doctorName'">{{item.doctorName}}</p>
                                </div>
                            </div>
                        <div class="col-md-3">
                            <select class="form-control" v-model="param.evaluationFlag">
                                <option value="">全部</option>
                                <option value="0">未评价</option>
                                <option value="1">已评价</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button class="default blue" @click="getsearchlist">查询</button>
                        </div>
                    </div>
                </div>
                  <div class="servicepeoplelist bg">
                    <table class="table table-hover">
                        <tbody>
                            <tr v-for="item in commentlist" track-by="$index">
                                <td><img :src="item.avatarFileId"></td>
                                <td>{{item.doctorName+':'+item.doctorLevelText}}</td>
                                <td>被评患者：{{item.personName}}<button class="default greynobg">{{item.memberTypeText}}</button></td>
                                <td>
                                    <p :class="{'orange':item.evaluationFlag==1,'green':item.evaluationFlag==0}">{{item.evaluationFlag==1?"已评价":"待评价"}}</p>
                                </td>
                                <td>{{item.evaluationTime?item.evaluationTime.substring(0,10):""}}</td>
                                <td>
                                    <span class="glyphicon glyphicon-eye-open" @click="commentmodal(item)" v-if="item.evaluationFlag==1"></span>
                                </td>
                            </tr>
                            <tr v-if="isshowbootpage">
                                <td colspan="6">
                                    <div class="pull-left">
                                        <button class="btn btn-default" @click="refresh">刷新</button>
                                    </div>
                                    <div class="pull-right">
                                        <!-- 分页组件: -->
                                        <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="!isshowbootpage">
                                <td class="text-center">
                                    目前不再评价周期内
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
       <!-- 评价问卷 -->
        <div class="bs-example-modal-lg" id="comment_question">
            <button type="button" class="close" id="handclose" @click="handclose"><span>&times;</span></button>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <ul class="cbafter tabmenu">
                            <li class="cur">医生对患者评价</li>
                        </ul>
                    </div>
                    <div class="modal-body">
                        <div class="tabcon twostep">
                            <form class="form-horizontal twostepform" role="form" id="twostepform" v-on:submit.prevent="gothreestep" name="twostepform">
                                <div class="twostep_3">
                                    <h4>评价问卷</h4>
                                    <div class="form-group" v-for="item in steptwoformdata.questionnaireresultdetailList" v-show="item.ishow">
                                        <div class="subjectContent" :class="{'bgblue':item.subjectAnswerType=='05'}" v-if="item.subjectAnswerType!='99'">{{item.xuhao+item.subjectContent}}</div>
                                        <div class="radio" v-for="itemsub in item.options" v-if="item.subjectAnswerType=='01'">
                                            <label @click="rdioisSelected(itemsub,item.options)">
                                                <input type="radio" name="{{'radio'+$parent.$index}}" value="{{itemsub.optionId}}" :checked="itemsub.selected"><span>{{itemsub.optionContent}}</span>
                                            </label>
                                        </div>
                                        <div class="checkbox" v-for="itemsub in item.options" v-if="item.subjectAnswerType=='02'">
                                            <label @click="checkboxisSelected(itemsub,item.options)">
                                                <input type="checkbox" value="" name="{{'checkbox'+$parent.$index}}" :checked="itemsub.selected"><span>{{itemsub.optionContent}}</span>
                                            </label>
                                        </div>
                                        <input v-if="item.subjectAnswerType=='03'" type="text" class="text" v-model="item.options[0].optionInputContent">
                                        <textarea v-if="item.subjectAnswerType=='04'" v-model="item.options[0].optionInputContent"></textarea>
                                        <!-- <div v-if="item.subjectAnswerType=='99'" class="fyf"></div> -->
                                    </div>
                                    <div class="form-group pagebreaks">
                                        <div class="col-md-12 ">
                                            <ul>
                                                <li v-for="item in pagetotlearr" @click="pageclick(item,$event)" :class="{activecur:$index==0}">{{$index+1}}</li>
                                            </ul>
                                            <span>总共{{pagetotlearr.length}}页</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-3 col-md-offset-5" v-if="isshowsave">
                                        <button type="submit" class="default greynobg">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改弹框背景-->
        <div class="bg_master2" style="display:none"></div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import bootPage from 'components/BootPage.vue'
export default {
      data() {
            return {
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.evaluationService",
                    "X-Service-Method": "queryMpiEvaluationList",
                },
                param: {
                    "doctorId": "",
                    "pageNo": 1,
                    "pageSize": 10,
                    "evaluationFlag": "",
                     "doctorName":"",
                },

                commentlist: [],
                isshowbootpage: false,
                steptwoformdata: {
                    "evaluationObjectId": "", //被评价人Id
                    "evaluationObjectName": "", //被评价人姓名
                    "questionnaireresult": {
                        "questionnaireId": "",
                        "questionnaireTypeId": "",
                        "questionnaireTitle": "",
                        "questionnaireDesc": "",
                        "status": ""
                    },
                    "questionnaireresultdetailList": []
                },
                pagetotlearr: [],
                isshowsave: true,
                curevaluationResultId:"",
                mainDoctorlist:[],
            }
        },
        computed: {},
        components: {
            moduleHead, menuList, bootPage
        },
        ready() {
            var that = this;
            //查询是否在评价周期内
            $.when(Public.commonajax("coms.evaluationService", "getEvalutionPeriodFlag", `['']`))
                .done(function(res) {
                    if (res.code == 200) {
                        if (res.body.evalutionPeriodFlag == "1") {
                            that.isshowbootpage = true;
                            that.getMainDoctorList();
                        }
                    }

                })
        },
         methods: {
            // 获取主管医生列表
            getMainDoctorList(){
                var that=this;
                $.when(Public.commonajax("coms.memberService", "getMainDoctorList", `['']`))
                .done(function(res) {
                    if (res.code == 200) {
                       that.mainDoctorlist=res.body;
                    }

                })
            },
            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                // 进入评价
                commentmodal(item) {
                    $("#comment_question").show();
                    $(".bg_master2").show();
                    if (item.evaluationResultId) {
                        this.isshowsave=false;
                        this.curevaluationResultId=item.evaluationResultId
                        this.getcomment();
                    } else {
                        this.steptwoformdata.evaluationObjectId = item.mpiId;
                        this.steptwoformdata.evaluationObjectName = item.personName;
                        this.isshowsave=true;
                        this.getHealthInfomethod();
                    }

                },

                // 点击关闭修改会员弹框
                handclose() {
                    $("#comment_question").hide();
                    $(".bg_master2").hide();
                },
                //获取问卷
                getHealthInfomethod() {
                    var that = this;
                    that.steptwoformdata.questionnaireresultdetailList = [];
                    $.when(Public.commonajax("coms.questionnairedefService", "findQuestionnairesubjectdefByQuestionnaireId", `[0, "02", 1]`))
                        .done(function(res) {
                            if (res.code = 200) {
                                res.body.list = that.editquestiondata(res.body.list)
                                that.steptwoformdata.questionnaireresultdetailList = res.body.list;
                                that.steptwoformdata.questionnaireresult = res.body.questionnairedef;
                            }
                        })
                },
                // 查询已有问卷
                 getcomment() {
                    var that = this;
                    that.steptwoformdata.questionnaireresultdetailList = [];
                    $.when(Public.commonajax("coms.questionnairedefService", "findQuestionaireResult",  `['${this.curevaluationResultId}']`))
                        .done(function(res) {
                            if (res.code = 200) {
                                res.body.questionnairesubjectdefList = that.editquestiondata(res.body.questionnairesubjectdefList)
                                that.steptwoformdata.questionnaireresultdetailList = res.body.questionnairesubjectdefList;
                            }
                        })
                },
                // 修改评价问卷的数据进行分页
                editquestiondata(data) {
                    var that = this;
                    that.pagetotlearr = [];
                    // 获取会员健康信息
                    var xuhao = 0,
                        pagebreaksindexarr = [];
                    // 制作分页符数组pagebreaksindexarr（获得用于截取list数组分成几页的索引）以及隐藏描述题目和分页符题目的序号
                    $.each(data, function(index, el) {
                        if (el.subjectAnswerType == "99") {
                            pagebreaksindexarr.push(index);
                        }
                        if (el.subjectAnswerType == "05" || el.subjectAnswerType == "99") {
                            el.xuhao = ""
                        } else {
                            xuhao++;
                            el.xuhao = (xuhao) + "、"
                        }
                        el.ishow = false;
                    });
                    //头部添加索引0和尾部添加100是为了使用slice函数截取数组
                    pagebreaksindexarr.unshift(0);
                    pagebreaksindexarr.push(100);
                    // 有几个页面pagetotle
                    for (var i = 0; i < pagebreaksindexarr.length - 1; i++) {
                        var pagebreakstemobj = {
                            start: pagebreaksindexarr[i],
                            end: pagebreaksindexarr[i + 1],
                        };
                        that.pagetotlearr.push(pagebreakstemobj);
                    }
                    var question2 = data.slice(pagebreaksindexarr[0], pagebreaksindexarr[1]);
                    // 修改显示当前分页的数据的属性ishow
                    $.each(question2, function(index, el) {
                        el.ishow = true
                    });
                    // 然后再把data的对应的数据用修改了的数据替换掉
                    $.each(data, function(index, el) {
                        $.each(question2, function(index2, el2) {
                            if (el.subjectId == el2.subjectId) {
                                el = el2;
                            }
                        });
                    });

                    return data
                },
                //分页符点击效果
                pageclick(item, event) {
                    // 所有数据显示属性ishow = false
                    $.each(this.steptwoformdata.questionnaireresultdetailList, function(index, el) {
                        el.ishow = false
                    });
                    $(event.target).addClass('activecur').siblings('li').removeClass('activecur');
                    var question2 = this.steptwoformdata.questionnaireresultdetailList.slice(item.start, item.end);
                    $.each(question2, function(index, el) {
                        el.ishow = true
                    });
                    $.each(this.steptwoformdata.questionnaireresultdetailList, function(index, el) {
                        $.each(question2, function(index2, el2) {
                            if (el.subjectId == el2.subjectId) {
                                el = el2;
                            }
                        });
                    });

                },
                // 保存问卷
                gothreestep() {
                    var that = this;
                    $.when(Public.commonajax("coms.evaluationService", "saveMpiEvaluation", '[' + JSON.stringify(this.steptwoformdata) + ']'))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("提交成功");
                                $("#comment_question").hide();
                                $(".bg_master2").hide();
                                that.refresh();
                            } else {
                                Public.ajaxPrompt(res.msg)
                            }
                        })

                },
                // 单选的选项是否被选中
                rdioisSelected(subitem, options) {
                    // console.log(subitem);
                    $.each(options, function(index, el) {
                        el.selected = false;
                    });
                    subitem.selected = true;
                    // console.log(options);
                },

                // 多选的选项是否被选中
                checkboxisSelected(subitem, options) {

                    subitem.selected = !subitem.selected;
                    // console.log(options)
                },
                 // 搜索中主管医生下拉框选中后赋值给input
                mayclick(item, event) {
                    if (item == undefined && event == undefined) {
                        this.param.doctorId = "";
                        this.param.doctorName = "";
                    } else {
                        this.param.doctorId = item.doctorId;
                        this.param.doctorName = item.doctorName

                    }
                    $(".yishenglist").hide();

                },
                getsearchlist(){
                    this.refresh()
                }

        },
        events: {
            // 分页列表数据
            'data' (data) {
                $.each(data, function(index, el) {
                    el.avatarFileId = Public.IMGVIEW_URL() + el.avatarFileId
                });
                this.commentlist = data;
            },


        },
        watch: {


        },
}
$(function() {
    // 搜索位置主管医生的下拉
    $("#zhuguanyis").find('input').on('click', function(event) {
        event.preventDefault();
        $(".yishenglist").show();
    });
})
</script>
<style scoped>

#searchbyname {
    width: 700px
}

.servicepeoplelist {
    padding: 20px
}

.servicepeoplelist table th {
    text-align: center;
    line-height: 36px;
    height: 36px;
}

.servicepeoplelist table td {
    line-height: 40px;
    text-align: center;
}

.servicepeoplelist table tr td .glyphicon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.servicepeoplelist table td img {
    width: 50px;
    height: 50px;
    border-radius: 50%
}

.servicepeoplelist table tr td .glyphicon:hover {
    color: #1dc499;
    cursor: pointer;
}

.servicepeoplelist table td p.orange {
    color: #1dc499;
}

.servicepeoplelist table td p.green {
    color: #FBAB32;
}

.servicepeoplelist table tr td:nth-child(3){
    width: 300px
}

.form-horizontal .radio {
    padding-top: 0
}

.table>tbody>tr>td {
    border-bottom: 1px solid #ddd;
    border-top: none;
}
.table>tbody>tr>td button.greynobg{
    border: 1px solid#FBAB32;color:#FBAB32; display: inline-block;
      width: auto;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 5px;
}
.table>tbody>tr:last-child >td {
    border-bottom: none
}

#comment_question .modal-header {
    min-height: 60px;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    /*width: 950px;*/
}

#comment_question .modal-header ul {
    background: #fafafa;
    padding-left: 20px;
}

#comment_question .modal-header ul li {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}

#comment_question .modal-header ul li.cur {
    color: #1fc49a;
    background: #fff;
}

.threestep {
    margin: 20px auto 0;
    position: relative;
}

.threestep>.btn-default {
    border: 2px solid #1dc499;
    color: #1dc499;
    border-radius: 17px;
    position: absolute;
}

.threestep>.btn-default.btn_add {
    top: 300px;
    left: 74px;
}

.threestep>.btn-default.btn_del {
    top: 350px;
    left: 74px;
}

.threestep>.btn-default:hover {
    background: none
}

.tab_menu {
    border-radius: 5px;
    position: absolute;
    top: 120px;
    left: 74px;
    z-index: 1
}

.tab_menu li {
    line-height: 46px;
    height: 46px;
    font-size: 14px;
    width: 172px;
    background: url(../../assets/img/tap_menu.png) no-repeat left center;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
}

.tab_menu li.active {
    background: url(../../assets/img/tab_cur.png) no-repeat left center;
    color: #fff
}

.tab_con {
    padding: 20px
}

.note-editor .programme_list {
    padding: 10px 0 10px
}

.programme_list li {
    padding: 5px 0 5px 15px;
    border: 1px solid #fafafa;
    border-radius: 5px;
    margin-top: 10px
}

.programme_list li.active {
    background: #1dc499;
    color: #fff
}

.programme_list li input {
    background: none;
    border: none
}

.mb_tag {
    background: #fafafa;
    border-right: 1px solid #eeeeee;
    min-height: 200px;
    padding: 10px
}

.mb_tag a {
    display: block;
    width: 50%;
    float: left;
    background: none;
    color: #787878;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    text-align: center;
    overflow: hidden;
}

.mb_tag a.active {
    background: #1dc499;
    color: #fff;
}

.twostep_0,
.twostep_1,
.twostep_2,
.twostep_3 {
    border: 1px solid #d3d3d3;
    width: 760px;
    margin: 20px auto 0;
    padding-top: 20px;
    position: relative;
}

.twostep_3 {
    margin-bottom: 20px
}

.twostep_3 .subjectWrap {
    display: block
}

.twostep_3 .radio .subjectWrap:nth-child(1) {
    margin-left: 10px
}

.twostep_3 .form-group {
    margin-left: 30px;
    margin-right: 30px;
}

.twostep_3 .subjectContent {
    font-weight: bold;
    padding: 0 10px 5px
}

.twostep_3 .radio,
.twostepform .checkbox {
    padding-left: 30px;
}


/*.twostep_3 .radio input,
.twostepform .checkbox  input{
  width: 20px; height: 20px
}*/

.twostep_3 .radio span,
.twostepform .checkbox span {
    margin-left: 10px;
    margin-top: 3px;
    display: inline-block;
}

.twostep_3 textarea,
.twostepform input.text {
    margin-left: 30px;
    border: 1px solid #ccc;
    width: 90%
}

.twostepform input[type="text"],
textarea {
    padding: 10px
}

.twostepform input[type="radio"],
.twostepform input[type="checkbox"] {
    height: 20px;
    width: 20px;
    background: url(../../assets/img/radio.png) no-repeat center center;
}

.twostepform input[type="radio"]:checked {
    background: url(../../assets/img/radiochecked.png) no-repeat center center;
}

.twostepform p {
    padding-top: 7px;
}

.form-horizontal .radio,
.form-horizontal .radio-inline {
    padding-top: 2px;
}

.twostep h4 {
    background: #fff;
    width: 80px;
    text-align: center;
    padding: 0 10px;
    color: #bbbbbb;
    position: absolute;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    top: -15px;
    left: 50px;
}


/*分页样式*/

.pagebreaks li {
    float: left;
    width: 30px;
    height: 30px;
    padding: 0 5px;
    border: 1px solid #ccc;
    line-height: 30px;
    text-align: center;
    margin-right: 10px;
}

.bgblue {
    background: #f1f1f1
}

.pagebreaks li:hover {
    cursor: pointer;
}

.pagebreaks li.activecur {
    background: #1dc499;
    color: #fff
}

.pagebreaks span {
    display: inline-block;
    margin-top: 5px;
}

#comment_question {
    position: absolute;
    width: 1000px;
    height: 700px;
    /*background: red;*/
    top: 100px;
    display: none;
    left: 50%;
    margin-left: -500px;
    border-radius: 10px;
    z-index: 2;
}

#handclose {
    position: absolute;
    z-index: 99;
    top: 40px;
    right: 70px
}

.form-horizontal .radio {
    padding-top: 0
}

#zhuguanyis {
    position: relative;
    display: inline-block;
}

#zhuguanyis .yishenglist {
    position: absolute;
    display: none;
    top: 32px;
    z-index: 9;
    width: 203px;
    height: 200px;
    overflow: auto;
    -webkit-box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    -moz-box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 10px
}

#zhuguanyis .yishenglist p {
    line-height: 26px;
    height: 26px;
    margin-top: 5px;
    background: #f1f1f1;
    padding-left: 10px
}

#zhuguanyis .yishenglist p:nth-child(1) {
    background: #1dc499;
    color: #fff
}

</style>
